---
title: Esempi
description: Esempi prima e dopo di Ultracite in azione.
---

To illustrate Ultracite’s capabilities, here are a few practical examples of issues it catches and fixes. Each example shows code before (with a problem) and after Ultracite is applied. These examples demonstrate how Ultracite improves code automatically.

## Formattazione automatica del codice

### Prima (formattazione disordinata)

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

In questo codice, gli spazi e lo stile di concatenazione non sono corretti. Inoltre viene utilizzata la concatenazione di stringhe invece dei template literal, e sono mescolate virgolette doppie e singole.

### Dopo (formattato)

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

Il formatter di Ultracite ha:

- Formattato la funzione con interruzioni di linea appropriate per la leggibilità.
- Convertito la concatenazione di stringhe in un template literal (questa potrebbe essere una correzione automatica di una regola di lint che suggerisce le template string per la leggibilità).
- Standardizzato le virgolette sui backtick per il template (e userebbe le virgolette doppie in modo coerente altrove se non fosse un template).
- Aggiunto un punto e virgola alla fine dell'istruzione di `return`.
- Garantito spaziatura corretta attorno a parentesi graffe e tonde.

Lo sviluppatore non ha riformattato manualmente il codice: ha semplicemente salvato il file e Ultracite ha gestito il resto. Il risultato è un codice più pulito e più coerente.

Ultracite avviserà anche che `name` non è tipizzato e suggerirà di aggiungere un tipo.

## Applicazione dell'uguaglianza stretta

### Prima (possibile bug dovuto all'uguaglianza debole)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

Qui il codice usa l'uguaglianza debole (`==`) per confrontare `response.status` con `200`. Usare l'uguaglianza debole può essere soggetto a errori a causa della coercizione dei tipi (ad es., `response.status` potrebbe essere una stringa `"200"` e comunque passare). Le regole rigide di Ultracite probabilmente impongono l'uso di `===` per i confronti.

### Dopo (correzione automatica di Ultracite applicata)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

Ultracite ha automaticamente sostituito `== 200` con `=== 200`. Questa piccola modifica previene bug sottili. La correzione è stata applicata al salvataggio come parte delle azioni `source.fixAll.biome`. Una regola del genere (simile a `eqeqeq` di ESLint) assicura che gli sviluppatori usino il confronto con uguaglianza stretta.

Inoltre, Ultracite avviserà anche che `isValid` non viene mai usato e suggerirà di rimuoverlo.

## Organizzazione e pulizia degli import

### Prima (import non organizzati)

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Gli import qui non sono in ordine alfabetico e l'import `helper` non viene mai utilizzato nel file.

### Dopo (dopo il salvataggio con Ultracite)

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Ultracite (tramite la funzionalità di organize imports di Biome) ha ordinato gli import alfabeticamente per nome del modulo. Ha anche rimosso automaticamente l'import non usato `helper`. La differenza tra prima e dopo avviene immediatamente al salvataggio, garantendo che la sezione degli import sia sempre ordinata:

- Nessun import non usato che ingombri la parte superiore del file.
- Ordinamento deterministico degli import (così merge e diff non vengono confusi da diversi ordini di import introdotti da sviluppatori differenti).

Questo si traduce in codice più manutenibile, specialmente nei file con molti import.

## Correzione per l'accessibilità

### Prima

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

Il tipo predefinito di un button è `submit`, il che provoca l'invio di un form quando è posizionato all'interno di un elemento form. Probabilmente questo non è il comportamento desiderato in un'applicazione React. Ultracite ti avviserà di questo e offrirà una correzione rapida per cambiare il tipo in `button`.

### Dopo (manuale o correzione rapida)

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

Il tipo è ora `button`, il che previene l'invio involontario di un form genitore quando il pulsante viene cliccato.

---

Questi esempi dimostrano come Ultracite migliori la qualità del codice:

- Formattazione e coerenza stilistica senza sforzo.
- Correzioni automatiche per molti problemi comuni (così raramente dovrai correggere manualmente cose banali).
- Individuazione di problemi reali (così puoi risolverli precocemente nello sviluppo).

Usando Ultracite, il tuo codice non solo resta pulito ma è anche meno soggetto a bug e più accessibile, grazie alla conoscenza collettiva codificata nelle sue regole.